<template>
  <div class="view">
    <div>
      <img class="top" src="../assets/banner-top.png">
      <img class="top logo1" src="../assets/banner-logo1.png">
      <img class="top logo2" style="opacity: 0;" src="../assets/banner-logo2.png">
    </div>
    <div class="viewTop">
        <div class="colse" @click="goBack"><img src="../assets/close.png"></div>
        <h3>上传图片</h3>
        <button class="sendBtn">发送</button>
    </div>
    <div class="viewCont">
        <mt-field placeholder="您有什么想说的（200~800字以内）" :attr="{ minlength:200,maxlength:800 }" type="textarea" rows="4" v-modal="introduction"></mt-field>
        <div class="uploadForm">
            <label class="btn-file" for="add_img">
                <input class="upload" @change='add_img(this)' id="add_img" type="file" accept="image/*">
                <img src="../assets/add.png" alt="">
            </label>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
      return {
          introduction:"",
          imgs: [],
          imgData: {
            accept: 'image/gif, image/jpeg, image/png, image/jpg',
        }
      }
  },
  methods: {
        goBack () {
            this.$router.back(-1);
        },
        add_img(that){    
            // let file = that.files[0]; 
            // let imageType = /image.*/; 
            // if (file.type.match(imageType)) {
            //     let reader    = new FileReader(); 
            //     reader.onload = function () {
            //         this.imgs.push(reader.result)
            //     };
            //     reader.readAsDataURL(file);
            // } 
        }
  },
}
</script>
<style lang="scss" type="text/scss">
  body {
    background: #ececec;
  }
    .view{
        .top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 2;
        }
        .viewTop{
            margin-top: 8vw;
            height: 8vh;
            width: 100%;
            background: url(../assets/viewTop.png) no-repeat center center;
            background-size: 100% auto;
            overflow: hidden;
            position: relative;
            color: #fff;
            .colse{
                float: left;
                width: 3.5vw;
                height: 3.5vw;
                margin: 2.4vh 0 0 4vw;
            }
            > h3 {
                position: absolute;
                top: 0;  
                left: 50%;
                width: 50vw;
                height: 8vh;
                line-height: 8vh;
                margin-left: -25vw;
                text-align:center;
            }
            .sendBtn{
                float: right;
                margin: 2.4vh 4vw 0 0;
                background: none;
                border: none;color: #fff;
            }

        }
        .viewCont{
            padding: 3vw;
        }
        .uploadForm{ 
            display: block;
            padding: 2vh 0;
            .btn-file{
                float: left;
                width: 23vw;
                height: 23vw;;
                margin: 0 3vw 3vw 0;
                .upload{display: none;}
            }
        }
    }

</style>
